<template>
  <div class="bg">
    <div class="title" style="padding-right: 10px;padding-top: 30px;">
      <h1>
        {{ $t('态势感知大屏') }}
      </h1>
    </div>
    <a id="back-button" href="javascript:history.back()">
      <img src="../assets/images/back.png" alt="back to base" />
      <p style="color:aliceblue">{{ $t('返回') }}</p>
    </a>
    <div class="leftMain">
      <LeftTop/>
      <LeftMid/>
      <LeftBot/>
    </div>
    <div class="rightMain">
      <RightTop/>
      <RightBot/>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount } from "vue"
//  import autofit from 'autofit.js'
import LeftTop from '~/components/BigScreenPart/LeftTop.vue'
import LeftMid from '~/components/BigScreenPart/LeftMid.vue'
import LeftBot from '~/components/BigScreenPart/LeftBot.vue'
import RightTop from '~/components/BigScreenPart/RightTop.vue'
import RightBot from '~/components/BigScreenPart/RightBot.vue'
import '~/components/BigScreenPart/css/bg.css'
import '~/components/BigScreenPart/css/style_bg.css'

onMounted(() => {
  document.documentElement.style.fontSize = (document.documentElement.clientWidth / 937) * 100 + 'px'; // 设置当前页面的根元素字体大小
})
onBeforeUnmount(() => {
  document.documentElement.style.fontSize = '';  //移除当前页面的根元素字体大小设置 
})

</script>

<style scoped>
/*.bg {*/
/*  margin: 0 auto;*/
/*  width: auto;*/
/*  min-height: 100vh;*/
/*  background: url('../assets/images/bg16_9改.png') no-repeat;*/
/* 16:9 */
/*  background-size: cover;*/
/*  padding: 0 0.2rem;*/
/*}*/

/*.title {*/
/*  width: 100%;*/
/*  font-size: 0.15rem;*/
/*  line-height: 0.3rem;*/
/*  color: rgba(14, 253, 255, 1);*/
/*  text-align: center;*/
/*  font-weight: bold;*/
/*  /* padding-left: 70px; */
/*  overflow: hidden;*/
/*}*/

/*.leftMain {*/
/*  width: 75%;*/
/*  float: left;*/
/*  padding-right: 0.1rem;*/
/*  padding-top: 0.1rem;*/
/*}*/

/*.rightMain {*/
/*  width: 25%;*/
/*  float: left;*/
/*  padding-top: 0.1rem;*/
/*}*/


</style>
